<template>
    <div class="spark">
        <div class="moduleHead">
            <span @click="$router.push({name: 'letsMeet'})" class="back"></span>
            <span class="center">
                Spark
            </span>
            <div class="right ico_heart"></div>
        </div>
        <div class="tab_nav">
            <ul>
                <li @click="swtichTab('likes')" :class="tabClass('likes','menu')">
                    <span>
                        Likes you
                        <!-- <i v-if="stateNums.likesYou"  class="newCount">{{stateNums.likesYou}}</i> -->
                    </span>
                    <i class="main_bg"></i>
                </li>
                <li @click="swtichTab('mutualLikes')" :class="tabClass('mutualLikes','menu')">
                    <span>
                        Mutual likes
                        <i v-if="stateNums.mutualLikes" class="newCount">{{stateNums.mutualLikes}}</i>
                    </span>
                    <i class="main_bg"></i>
                </li>
                <li @click="swtichTab('youLike')" :class="tabClass('youLike','menu')">
                    <span>
                        You like
                    </span>
                    <i class="main_bg"></i>
                </li>
            </ul>
        </div>
        <div class="body" ref="divScrollListen">
            <div :class="tabClass('likes')">
                <PromptTip :props="condition.likes.promptip"></PromptTip>
                <ul class="userList">
                    <li v-for="(item,index) in likesList" @click="goUserProfile(item.usr_id, item.username,'likes',index)">
                        <div class="avatar" :class="getGenderBgClass(item.gender)">
                            <LazyImg :src="filterGenderImg(item.icon)"></LazyImg>
                        </div>
                        <div class="center">
                            {{item.username}}
                            <p>{{item.baseInfo}}</p>
                        </div>
                        <div class="right ico_heart_2"></div>
                        <!-- <i v-if="item.checked == 0" class="unread"></i> -->
                    </li>
                </ul>
                <Loading :props="{show:condition[this.tabName].loading}"></Loading>
            </div>
            <div :class="tabClass('mutualLikes')">
                <PromptTip :props="condition.mutualLikes.promptip"></PromptTip>
                <ul class="userList">
                    <li v-for="(item,index) in mutualLikesList" @click="goUserProfile(item.usr_id, item.username,'mutualLikes',index)">
                        <div class="avatar" :class="getGenderBgClass(item.gender)">
                            <LazyImg :src="filterGenderImg(item.icon)"></LazyImg>
                        </div>
                        <div class="center">
                            {{item.username}}
                            <p>{{item.baseInfo}}</p>
                        </div>
                        <div class="right ico_mutual_like"></div>
                        <i v-if="item.checked == 0" class="unread"></i>
                    </li>
                </ul>
                <Loading :props="{show:condition[this.tabName].loading}"></Loading>
            </div>
            <div :class="tabClass('youLike')">
                <PromptTip :props="condition.youLike.promptip"></PromptTip>
                <ul class="userList">
                    <template v-for="(item,index) in youLikeList">
                        <li @click="goUserProfile(item.usr_id, item.username)">
                            <div class="avatar" :class="getGenderBgClass(item.gender)">
                                <LazyImg :src="filterGenderImg(item.icon)"></LazyImg>
                            </div>
                            <div class="center">
                                {{item.username}}
                                <p>{{item.baseInfo}}</p>
                            </div>
                            <div class="right ico_heart_2"></div>
                        </li>
                        <router-link v-if="[2,19,39].indexOf(index) > -1 && userInfo.status.isGuest == 1" :to="{ name: 'upgrade'}">
                            <div class="seeLikesYou">
                                <p class="main_bg"><span></span>See who likes you!<i></i></p>
                            </div>
                        </router-link>
                    </template>
                </ul>
                <Loading :props="{show:condition[this.tabName].loading}"></Loading>
            </div>
        </div>
    </div>
</template>
<script>
import * as API from '../api';
import globalMixin from '../common/globalMixin'
import PublicDialog from './PublicDialog'
import Loading from './Loading'
import PromptTip from './PromptTip'
import LazyImg from './LazyImg'

let userList = {
    likes: [],
    mutualLikes: [],
    youLike: [],
};

export default {

    name: 'spark',

    components: {
        PromptTip,
        PublicDialog,
        Loading,
        LazyImg
    },

    mixins: [globalMixin],

    data() {
        return {
            // loading: true,
            tabName: 'mutualLikes',
            dialogData: {},
            stateNums: {
                // likesYou:0,
                mutualLikes: 0,
            },
            condition: {
                likes: {
                    page_num: 0,
                    offset: 20,
                    loading: false,
                    noMoreData: false,
                    count: 0
                },
                mutualLikes: {
                    page_num: 0,
                    offset: 20,
                    loading: false,
                    noMoreData: false,
                    count: 0
                },
                youLike: {
                    page_num: 0,
                    offset: 20,
                    loading: false,
                    noMoreData: false,
                    count: 0
                },
            },
        }
    },

    created() {
        // this.getData_' + this.tabName]();
    },

    activated() {
        this.tabName = this.$route.query.type || 'mutualLikes';
        this.getUserList();
        this.stateNums = this.getNums();
    },

    deactivated: function() {
        this.setNums();
    },

    computed: {
        userInfo() {
            return this.$store.state.user.userInfo;
        },

        likesList() {
            let list = [];
            for (let i = 0; i < this.condition.likes.count; i++) {
                list.push(this.formatUserInfo(userList.likes[i]));
            }
            return list;
        },

        mutualLikesList() {
            let list = [];
            for (let i = 0; i < this.condition.mutualLikes.count; i++) {
                list.push(this.formatUserInfo(userList.mutualLikes[i]));
            }
            return list;
        },

        youLikeList() {
            let list = [];
            for (let i = 0; i < this.condition.youLike.count; i++) {
                list.push(this.formatUserInfo(userList.youLike[i]));
            }
            return list;
        },
    },

    methods: {

        getNums() {
            let stateObj = this.$store.state.base.siteNumState,
                obj = {
                    // 'likesYou': (typeof(stateObj) != 'undefined' && typeof(stateObj.likes_me_count) != 'undefined') ? this.judgeNum(stateObj.likes_me_count.new_count || 0) : 0,
                    'mutualLikes': (typeof(stateObj) != 'undefined' && typeof(stateObj.mutually_count) != 'undefined') ? this.judgeNum(stateObj.mutually_count.new_count || 0) : 0,
                };
            // obj.likesYou = 10;obj.mutualLikes = 10;
            return obj;
        },

        setNums() {
            let stateObj = Unit.getObjSessionStorage("siteNumState") || {};
            // if (typeof(stateObj.likes_me_count) != 'undefined') {
            //     stateObj.likes_me_count.new_count = this.stateNums.likesYou;
            // }
            if (typeof(stateObj.mutually_count) != 'undefined') {
                stateObj.mutually_count.new_count = this.stateNums.mutualLikes;
            }
            this.$store.dispatch('updateSiteNumStateData', stateObj);
        },

        formatUserInfo(obj) {
            let data = {},
                location = [];
            data.usr_id = obj.usr_id;
            data.username = obj.username;
            data.gender = obj.gender;
            data.icon = obj.picture.icon;
            data.checked = obj.checked;
            data.baseInfo = this.formatUserLocation({
                age: obj.age,
                city: obj.city,
                state: obj.state,
                country: obj.country,
            });
            return data;

        },

        getUserList() {
            if (this.condition[this.tabName].loading || this.condition[this.tabName].noMoreData) {
                return;
            }
            this.condition[this.tabName].loading = true;
            switch (this.tabName) {
                case 'likes':
                    this.getData_likes();
                    break;
                case 'mutualLikes':
                    this.getData_mutualLikes();
                    break;
                case 'youLike':
                    this.getData_youLike();
                    break;
                default:
                    this.getData_likes();
            }
        },

        swtichTab(name) {
            this.$router.push({
                name: 'spark',
                query: {
                    type: name
                }
            });
            this.tabName = name;
            if (parseInt(this.condition[this.tabName].count) == 0) {
                this.getUserList();
            }
        },

        tabClass(name, type) {
            var retClass;
            if (type == 'menu') {
                retClass = this.tabName == name ? 'main_color' : '';
            } else {
                retClass = this.tabName == name ? 'tabBox active' : 'tabBox';
            }
            return retClass;
        },

        showPropTip(obj) {
            this.condition[this.tabName].promptip = obj;
        },

        getData_likes() {
            var tthis = this;
            API.meet_likes_me({
                data: {
                    page_num: this.condition.likes.page_num,
                    offset: this.condition.likes.offset
                },
                success: result => {
                    if (parseInt(result.count) == 0) {
                        tthis.showPropTip({ show: true, type: 'default', title: tthis.language.spark_noData_title, content: tthis.language.spark_noData_content });
                        tthis.condition.likes.noMoreData = true;
                        return;
                    }
                    if (tthis.userInfo.status.isGuest) {
                        this.showPropTip({ show: true, type: 'upgrade', title: tthis.language.spark_msgOneTip, content: tthis.language.spark_msgOne })
                        return;
                    }
                    let length = result.res.length;
                    if (length > 0) {
                        userList.likes = userList.likes.concat(result.res);
                        tthis.condition.likes.count = userList.likes.length;
                        tthis.stateNums.likesYou = 0;
                        // for(let i =0; i<userList.likes.length; i++){
                        //     userList.likes[i].checked = 0;
                        // }
                    }
                    if (length < tthis.condition.likes.offset) {
                        tthis.condition.likes.noMoreData = true;
                    } else {
                        tthis.condition.likes.page_num++;
                    }
                },
                complete: () => {
                    this.condition.likes.loading = false;
                }
            })
        },

        getData_mutualLikes() {
            var tthis = this;
            API.meet_my_matched({
                data: {
                    page_num: this.condition.mutualLikes.page_num,
                    offset: this.condition.mutualLikes.offset
                },
                success: result => {
                    if (parseInt(result.count) == 0) {
                        tthis.showPropTip({ show: true, type: 'default', title: tthis.language.spark_noData_mutual_title, content: tthis.language.spark_noData_mutual_content });
                        tthis.condition.mutualLikes.noMoreData = true;
                        if (parseInt(result.finished_meet_game) == 1 && typeof(result.seconds) != 'undefined') {
                            // tthis.countDown(result.seconds);
                        }
                        return;
                    }

                    let length = result.res.length;
                    if (length > 0) {
                        userList.mutualLikes = userList.mutualLikes.concat(result.res);
                        tthis.condition.mutualLikes.count = userList.mutualLikes.length;
                        tthis.stateNums.mutualLikes = 0;
                        // for(let i =0; i<userList.mutualLikes.length; i++){
                        //     userList.mutualLikes[i].checked = 0;
                        // }
                    }
                    if (length < tthis.condition.mutualLikes.offset) {
                        tthis.condition.mutualLikes.noMoreData = true;
                    } else {
                        tthis.condition.mutualLikes.page_num++;
                    }
                },
                complete: () => {
                    this.condition.mutualLikes.loading = false;
                }
            })
        },

        getData_youLike() {
            var tthis = this;
            API.meet_last_round({
                data: {
                    page_num: this.condition.youLike.page_num,
                    offset: this.condition.youLike.offset
                },
                success: result => {
                    if (parseInt(result.count) == 0) {
                        tthis.showPropTip({ show: true, type: 'default', title: tthis.language.spark_noData_like_title, content: tthis.language.spark_noData_like_content });
                        tthis.condition.youLike.noMoreData = true;
                        if (parseInt(result.finished_meet_game) == 1 && typeof(result.seconds) != 'undefined') {
                            // tthis.countDown(result.seconds);
                        }
                        return;
                    }
                    let length = result.res.length;
                    if (length > 0) {
                        userList.youLike = userList.youLike.concat(result.res);
                        tthis.condition.youLike.count = userList.youLike.length;
                    }
                    if (length < tthis.condition.youLike.offset) {
                        tthis.condition.youLike.noMoreData = true;
                    } else {
                        tthis.condition.youLike.page_num++;
                    }
                },
                complete: () => {
                    this.condition.youLike.loading = false;
                }
            })
        },

        onDivBottomScroll(e) {
            if (this.$route.name == 'spark') {
                this.getUserList();
            }
        },

        setReadItem(tabName, index) {
            if (tabName && typeof(index) != 'undefined') {
                userList[tabName][index].checked = 1;
                this.condition[tabName].count = 0;
                this.condition[tabName].count = userList[tabName].length;
            }
        },

        goUserProfile(userid, username, tabName, index) {
            this.setReadItem(tabName, index);
            let myUsrId = this.$store.state.user.userInfo.account.usr_id;
            if (parseInt(myUsrId) != parseInt(userid)) {
                this.$router.push({
                    name: 'userProfile',
                    query: {
                        userName: username,
                        userId: userid
                    }
                });
            } else {
                this.$router.push({
                    name: 'me',
                });
            }
        }
    }
}

</script>
<style scoped>
.spark {
    padding-top: 92px;
    background: #f7f7f7;
}


.spark .tab_nav {
    position: absolute;
    left: 0;
    top: 44px;
    width: 100%;
    overflow: hidden;
    border-bottom: 1px solid #e2e4e7;
    background: #fff;
}

.spark .tab_nav li {
    position: relative;
    color: #777;
    font-size: 15px;
    width: 33.3%;
    padding: 6px 0 2px;
    height: 40px;
    line-height: 40px;
    float: left;
    text-align: center;
}

.spark .tab_nav li span {
    position: relative;
}

.spark .tab_nav li i.newCount {
    position: absolute;
    right: -14px;
    top: -12px;
    min-width: 8px;
    border-radius: 7px;
    background: #f64747;
    color: #fff;
    font-size: 12px;
    text-align: center;
    padding: 2px 3px;
    line-height: 10px;
    font-style: normal;
    transform: scale(.9);
}

.spark .tab_nav li.main_color>i {
    position: absolute;
    bottom: 0;
    left: 50%;
    margin-left: -39px;
    width: 78px;
    height: 2px;
    display: inline-block;
}

.spark .userList {
    padding: 0 12px;
    padding-top: 4px;
}

.spark .userList li {
    position: relative;
    width: 100%;
    padding: 14px 10px;
    border-bottom: 1px solid #ecebeb;
    overflow: hidden;
    box-sizing: border-box;
}

.spark .userList li .unread {
    width: 10px;
    height: 10px;
    background: #DF4141;
    display: block;
    border-radius: 10px;
    top: 9px;
    left: 68px;
    position: absolute;
}

.spark .userList .avatar {
    float: left;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-repeat: no-repeat;
    background-size: 60px;
    overflow: hidden;
    position: relative;
    -webkit-mask-image: -webkit-radial-gradient(circle, white, black);
}

.spark .userList .center {
    padding-left: 70px;
    padding-right: 60px;
    font-size: 16px;
    color: #333;
    padding-top: 8px;
}

.spark .userList .center p {
    font-size: 14px;
    color: #666;
}

.spark .userList .seeLikesYou {
    padding: 18px 0;
    height: 68px;
    line-height: 67px;
    color: #fff;
    font-size: 17px;
    text-align: center;
    border-bottom: 1px dotted #d9d9d9;
}

.spark .userList .seeLikesYou p {
    border-radius: 5px;
}

.spark .userList .seeLikesYou span {
    vertical-align: top;
    display: inline-block;
    width: 50px;
    height: 68px;
    background: url(../assets/icon_fire.png) center no-repeat;
    background-size: 45px;
    margin-right: 10px;
}

.spark .ico_heart_2,
.spark .ico_mutual_like {
    position: absolute;
    top: 50%;
    right: 10px;
    margin-top: -16px;
    width: 30px;
    height: 30px;
}

.spark .ico_heart_2 {
    background: url(../assets/ico_heart_2.png) no-repeat center;
    background-size: 20px;
}

.spark .ico_mutual_like {
    background: url(../assets/ico_mutual_like.png) no-repeat center;
    background-size: 28px;
}

.spark .tabBox {
    display: none;
}

.spark .tabBox.active {
    display: block;
}

</style>
